@import "../../_common/commonfunc"
vendors = official

.boxer
  background: #fff
  padding: 40rpx 30rpx
.input-code-group
  .input-item-area
    ss-display-flex(row nowrap, center)
    >.input-item-content
      margin-left: 30rpx
      &:first-child
        margin-left: 0
    .input-item-input
      width: 76rpx
      height: @width
      background: #FFFFFF;
      box-shadow: 0px 2px 12px 0px rgba(100, 101, 102, 0.12);
      border-radius: 10px;

.ss-codebox
  ss-display-flex(row nowrap, center)
  position: relative
  &.line
    >.item
      box-shadow: none
      border-bottom: 1px solid $color-line
      border-radius: 0
      &.item-active
        border-color: red
  >.item
    margin-left: 30rpx
    width: 76rpx
    height: @width
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px rgba(100, 101, 102, 0.12);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0 16rpx;
    position: relative
    ss-display-flex(row, flex-start, center)
    &:first-child
      margin-left: 0
    input
      width: 100%
      height: 100%

.ipt
  width: 0
  height: 0
  opacity 0


@keyframes md-codebox-flash
  from
    opacity 0
  to
    opacity 1
 
.cursor
  display block
  height 28rpx
  width: 1px
  background-color: #000
  position: absolute;
  z-index: 1;
  top: calc(50% - 14rpx);
  animation md-codebox-flash steps(2) 1s infinite

.md-codebox-dot
  display block
  height 10px
  width 10px
  border-radius 5px
  background-color red




//数字键盘 自定义
.ss-keyboard-wrap
  position: fixed
  width: 100vw
  height: 100vh
  z-index: $zidx-h
.ss-keyboard
  display: grid
  grid-template-columns: repeat(3, 30%)
  grid-template-rows: repeat(4, 60px)
  grid-row-gap: 1px
  grid-column-gap: 1px
  justify-content: center
  background: $color-bg
  position: fixed
  bottom: 0
  left: 0
  width: 100vw
  z-index: ($zidx-h + 1)
  ss-safe-area-inset-bottom()
  font-size: 32rpx
  font-weight: bold
  box-shadow: $box-shadow-top
  // &:before
  //   content: '';
  //   position: absolute;
  //   box-sizing: border-box;
  //   top: 0;
  //   left: 0;
  //   width: 200%;
  //   height: 200%;
  //   border-top: 1px solid $color-line
  //   transform: scale(0.5);
  //   -webkit-transform-origin: top left;
  //   z-index: 2
  >.item 
    position: relative
    &.item-active
      .htitle:not(:empty)
        background: fade-out(#000, .94)
  .htitle
    &:not(:empty)
      ss-display-flex(row, center, center)
      background: #fff
      height: 100%
  [class*='icon']
    &:before
      position: absolute
      top: calc(50% - 20rpx)
      font-size: 40rpx
      left: calc(50% - 20rpx)
  &.ss-keyboard-hide
    animation: slideUp2 ease .2s forwards
    &.show
      animation: slideUp ease .2s forwards


// 表单 编辑 
.ss-form-edit
  .input-item-area
    ss-display-flex(row nowrap, center, center)
    display: flex;
    justify-content: center;
    align-items: center;
  .input-item-input
    font-size: 30rpx
    font-weight: bold
    color: $color-text-title
    width: 200rpx
  .item-icon-edit
    &:after
      content: '\e7ec'
      color: $color-primary
    &.edit
      &:after
        content: '\e7c7'
        color: $color-primary
.title
  font-size: 32rpx
  font-weight: bold
  margin: 16rpx